<template>
  <el-row>
    <el-card :body-style="{ padding: '0px' }" shadow="never">
      <div slot="header" class="clearfix" >
        <span style="font-size: x-large">自用药宗辅助宏</span>
      </div>
      <div class="text item">
        <p>由于药宗循环过于简单，我自用的药宗宏只是代替基础技能，防止连点断读条</p>
      </div>
    </el-card>
    <el-card :body-style="{ padding: '0px' }" shadow="never" >
      <div slot="header" class="clearfix" >
        <span style="font-size: x-large">象征性写个基础循环宏（我自己是不用的）</span><el-button size="mini" type="success" round  @click="handleCopy" class="hong1">点击复制</el-button>
      </div>
      <div class="text item" >
        <ul style="font-size: larger;line-height:normal;list-style-type: none;" ref="hong1">
          <li>/cast 苍棘缚地</li>
          <li>/cast 紫叶沉疴</li>
          <li>/cast [nobuff:相使|bufftime:相使<3] 钩吻断肠</li>
          <li>/cast [bufftime:相使>11] 沾衣未妨</li>
          <li>/cast [bufftime:相使>9] 川乌射罔</li>
          <li>/cast 商陆缀寒</li>
        </ul>
      </div>
    </el-card>
    <el-card :body-style="{ padding: '0px' }" shadow="never">
      <div slot="header" class="clearfix" >
        <span style="font-size: x-large">含锋破月</span><el-button size="mini" type="success" round @click="handleCopy2" class="hong2">点击复制</el-button>
      </div>
      <div class="text item">
        <ul style="font-size: larger;line-height:normal;list-style-type: none; " ref="hong2" >
          <li>/cast 千枝绽蕊</li>
          <li>/cast 含锋破月</li>
          <li>/cast [bufftime:相使<6] 钩吻断肠</li>
          <li>/cast [bufftime:相使>9] 川乌射罔</li>
          <li>/cast 商陆缀寒</li>

        </ul>
      </div>
    </el-card>
    <el-card :body-style="{ padding: '0px' }" shadow="never">
      <div slot="header" class="clearfix" >
        <span style="font-size: x-large">商陆缀寒</span><el-button size="mini" type="success" round @click="handleCopy3" class="hong3" >点击复制</el-button>
      </div>
      <div class="text item">
        <ul style="font-size: larger;line-height:normal;list-style-type: none;" ref="hong3">
          <li>/cast 千枝绽蕊</li>
          <li>/cast 商陆缀寒</li>
        </ul>
      </div>
    </el-card>
    <el-card :body-style="{ padding: '0px' }" shadow="never">
      <div slot="header" class="clearfix" >
        <span style="font-size: x-large">钩吻断肠</span><el-button size="mini" type="success" round @click="handleCopy4" class="hong4">点击复制</el-button>
      </div>
      <div class="text item">
        <ul style="font-size: larger;line-height:normal;list-style-type: none; " ref="hong4" >
          <li>/cast 千枝绽蕊</li>
          <li>/cast 钩吻断肠</li>
          <li>/cast 银光照雪</li>
          <li>/cast 飞叶满襟</li>
        </ul>
      </div>
    </el-card>

  </el-row>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  name: 'hong',
  data(){
    return{
      copyData:null,
    }
  },
  methods:{
    handleCopy(){
      this.copyData = null
      this.copyData = this.$refs.hong1.innerHTML.replace("&amp;","&").replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/<li>/g,'').replace(/<\/li>/g,"\n");
      this.copyhong1()
    },
    copyhong1 () {
      var Url = this.copyData;
      var clipboard = new Clipboard(".hong1",
        {text: function() {
            return Url;}})
      console.log(this.copyData)
      clipboard.on('success', e => {
        this.$message({
          message: '复制成功',
          type: 'success'
        })
        //  释放内存
        clipboard.destory()
      })
      clipboard.on('error', e =>{
        // 不支持复制
        this.$message({
          message: '该浏览器不支持复制',
          type: 'failure'
        })
        // 释放内存
        clipboard.destory()
      })
    },
    handleCopy2(){
      this.copyData = null
      this.copyData = this.$refs.hong2.innerHTML.replace("&amp;","&").replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/<li>/g,'').replace(/<\/li>/g,"\n");
      this.copyhong2()
    },
    copyhong2 () {
      var Url = this.copyData;
      var clipboard = new Clipboard(".hong2",
        {text: function() {
            return Url;}})
      console.log(this.copyData)
      clipboard.on('success', e => {
        this.$message({
          message: '复制成功',
          type: 'success'
        })
        //  释放内存
        clipboard.destory()
      })
      clipboard.on('error', e =>{
        // 不支持复制
        this.$message({
          message: '该浏览器不支持复制',
          type: 'failure'
        })
        // 释放内存
        clipboard.destory()
      })
    },
    handleCopy3(){
      this.copyData = null
      this.copyData = this.$refs.hong3.innerHTML.replace("&amp;","&").replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/<li>/g,'').replace(/<\/li>/g,"\n");
      this.copyhong3()
    },
    copyhong3 () {
      var Url = this.copyData;
      var clipboard = new Clipboard(".hong3",
        {text: function() {
            return Url;}})
      console.log(this.copyData)
      clipboard.on('success', e => {
        this.$message({
          message: '复制成功',
          type: 'success'
        })
        //  释放内存
        clipboard.destory()
      })
      clipboard.on('error', e =>{
        // 不支持复制
        this.$message({
          message: '该浏览器不支持复制',
          type: 'failure'
        })
        // 释放内存
        clipboard.destory()
      })
    },
    handleCopy4(){
      this.copyData = null
      this.copyData = this.$refs.hong4.innerHTML.replace("&amp;","&").replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/<li>/g,'').replace(/<\/li>/g,"\n");
      this.copyhong4()
    },
    copyhong4 () {
      var Url = this.copyData;
      var clipboard = new Clipboard(".hong4",
        {text: function() {
            return Url;}})
      console.log(this.copyData)
      clipboard.on('success', e => {
        this.$message({
          message: '复制成功',
          type: 'success'
        })
        //  释放内存
        clipboard.destory()
      })
      clipboard.on('error', e =>{
        // 不支持复制
        this.$message({
          message: '该浏览器不支持复制',
          type: 'failure'
        })
        // 释放内存
        clipboard.destory()
      })
    }
  }
}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
  margin-left: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
  height: 100%;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.qixueimage {
  margin-left: 20px;
  width: 50%;
  height: 50%;
  display: block;
  object-fit: cover
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
